<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>m3u8视频测试</title>
  <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet"> -->
</head>
<body>
  <video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
    <!-- <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video
      </a>
    </p> -->
  </video>

  <link href="https://unpkg.com/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
  <script>
    var player = videojs('my-player', {}, function onPlayerReady() {
    videojs.log('Your player is ready!');

    // // In this context, `this` is the player that was created by Video.js.
    // this.play();

    // // How about an event listener?
    // this.on('ended', function() {
    //   videojs.log('Awww...over so soon?!');
    // });
  })

  player.src({
    src: "/api/static/video/273dbc82f45552ff7b98d36bf1ad86a8.mp4",
    type: 'application/x-mpegURL'
  })
  player.load()
  </script>
</body>
</html>